<template>
  <div class="sheet">
    <van-popup v-model="show" position="bottom" :style="{ width: '100%' }">
      <van-nav-bar class="title" title="答题卡题">
        <template #right>
          <span>{{ answer }}</span> / <span>{{ ids.length }}</span>
          题
        </template>
      </van-nav-bar>
      <van-cell class="cell">
        <template #title>
          <span>共{{ ids.length }}题</span>
        </template>
      </van-cell>
      <van-grid :column-num="6">
        <van-grid-item
          @click="toQuestion(value)"
          v-for="(value, index) in this.ids"
          :key="index"
        >
          <div
            class="box"
            :class="{
              answernum: nowChecked !== value,
              checked: nowChecked === value && isRight === null,
              success: state[index].id === value && state[index].isRight,
              error: state[index].id === value && state[index].isRight === false
            }"
          >
            {{ index + 1 }}
          </div>
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import bus from '../../../utils/bus.js'
export default {
  // props: ['ids'],
  data () {
    return {
      show: false,
      answer: ' 0',
      nowChecked: '',
      questions: '1',
      ids: [],
      isRight: null,
      state: []
    }
  },
  created () {
    // 显示
    bus.$on('isShow', item => {
      this.show = item
    })
    bus.$on('getid', item => {
      this.questions = item
    })
    bus.$on('idsget', item => {
      this.ids = item
      this.nowChecked = item[0]
      this.state = item.map(value => {
        return { id: value, isRight: null }
      })
    })
    bus.$on('isRight', item => {
      this.isRight = item
      this.state.forEach(value => {
        if (this.nowChecked === value.id) {
          value.isRight = item
        }
      })
    })
  },
  methods: {
    toQuestion (id) {
      // console.log(id)
      bus.$on('getNum', item => {
        this.answer = item
      })
      this.$emit('getQuestion', id)
      this.nowChecked = id
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.cell {
  background-color: #f7f4f5;
  color: #b4b4bd;
}
.answernum {
  border: 1px solid #b4b4bd;
  color: #b4b4bd;
}
.box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  line-height: 35px;
}
.active {
  border: 1px solid #b4b4bd;
  color: #b4b4bd;
}
//.van-grid-item__content::after
</style>
